<template>
    <div class="tags">
      <div class="new">
        <button @click="createTag">新增标签</button>
      </div>
      <ul class="current">
        <li v-for="tag in tagList"
            :class="{selected: selectedTags.indexOf(tag.name)>=0}"
            @click="toggle(tag.name)"
        >{{ tag.name }}</li>
      </ul>
    </div>
  
  </template>
  
  <script lang="ts">
    import { Component } from 'vue-property-decorator';
    import { mixins } from 'vue-class-component';
    import { TagHelper } from '../../mixins/tagHelper';
    @Component({
      
    })
    export default class tags extends mixins(TagHelper) {
      get tagList() {
        return this.$store.state.tagList;
      }
      selectedTags: string[] = []; 
      toggle(tag:string){
        const index = this.selectedTags.indexOf(tag)
        if(index >= 0){
          this.selectedTags.splice(index,1)
        }else{
          this.selectedTags.push(tag)
        }
        this.$emit("update:value",[...this.selectedTags])
      }
      created() {
        this.$store.commit('fetchTags')
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .tags {
      background: white;
      font-size: 14px;
      padding: 16px;
      flex-grow: 1;
      display: flex;
      flex-direction: column-reverse;
      > .current {
        display: flex;
        flex-wrap: wrap;
        > li {
          $bg: #d9d9d9;
          background: #d9d9d9;
          $h: 24px;
          height: $h;
          line-height: $h;
          border-radius: 12px;
          padding: 0 16px;
          margin-right: 12px;
          margin-top: 4px;
          &.selected{
            background: darken($bg,30%);
            color: white;
          }
        }
      }
      > .new {
        padding-top: 16px;
        button {
          background: transparent;
          border: none;
          color: #999;
          border-bottom: 1px solid;
          padding: 0 4px;
        }
      }
    }
  </style>